<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>精准询价</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/style_zj.css">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../fonts/iconfont.css">
    <style>
        .banner-mask{
            position: fixed;
            top: 0;
            height: 100%;
            width: 100%;
            background-color: #000;
            opacity: 0.5;
            z-index: 10;
        }
        .banner-content-m{
            height: auto;
            width: 860px;
            position: fixed;
            z-index: 20;
            background-color: #fff;
            top: 5%;
            left: 50%;
            bottom: 5px;
            margin-left: -430px;
        }
        .banner-content-m .title-b{
            line-height: 48px;
            background-color: #FB6A30;
            text-align: center;
            color: #fff;
            font-size: 16px;
        }
        .banner-content-m .content-b{
            padding: 20px;
            height: calc(100% - 48px);
            overflow-y: auto;
        }
        .wid-sty1{
            margin-right: 10px;
        }
        .banner-content-m img{
            width: 180px;
            height: 180px;
        }
        .text-ms{
            margin-left: 10px;
            margin-top: 70px;
            width: 170px;
            color: #CCC;
        }
        .dis_inblock{
            display: inline-block;
        }
        .box-file{
            display: inline-block;
            margin-bottom: 5px;
            position: relative;
        }
        .icon_close{
            position: absolute;
            top: 0;
            right: 0;
        }
    </style>
</head>
<body>
<!--新增编辑模态框-->
<div style="display: none" class="modal-banner-add">
    <div class="banner-mask btn-hide-modal"></div>
    <div class="banner-content-m">
        <div class="title-b js-showTitle">新增</div>
        <div class="content-b">
            <div class="clearfix">
                <div class="dis_inblock wid-sty1" style="vertical-align: middle">动态配图：</div>
                <div class="dis_inblock">
                    <div class="file-img">
                        <div class="box-file dis_inblock">
                            <img src="../img/uploadAdd.jpg" alt="" class="upload_btn">
                        </div>
                    </div>
                </div>
                <!--<div class="dis_inblock text-ms">-->
                    <!--只能上传jpg/png文件，-->
                    <!--图片比例：1026px*436px-->
                <!--</div>-->
            </div>
            <div class="clearfix mt10">
                <div class="fl wid-sty1" style="margin-top: 8px;">动态标题：</div>
                <div class="fl" style="width: 400px"><input placeholder="请输入动态标题" type="text" class="js-title layui-input"></div>
            </div>
            <div class="clearfix mt10">
                <div class="fl wid-sty1" style="margin-top: 8px;">动态详情：</div>
                <div class="fl"><textarea id="demo" style="display: none;"></textarea></div>
            </div>
            <div class="mt30 text-c">
                <span class="btn-sty11 btn-hide-modal">取消</span>
                <span class="btn-sty11 js-yesBtn" >确认</span>
            </div>
        </div>
    </div>
</div>

<!--<div id="header_01_html">
    <iframe id="header_01" src="head_01.html" frameborder="0"></iframe>
</div>-->
<div class="content-box">
    <!--<div id="left_tab_html">
        <iframe id="left_tab" src="left_tab.html?x=3&y=3" frameborder="0"></iframe>
    </div>-->
    <div class="right-box layui-form quali_honor" id="vue-box">
        <div class="friend-tips">
            <div class="title-box"><i class="icon-sty"></i><b class="title-tip">温馨提示</b></div>
            <div class="info-list">1、以下为发布企业荣誉栏目，可发文字介绍及插入图片！</div>
            <div class="info-list">2、完善此栏目可增加自身品牌优势，有助于成交。</div>
        </div>
        <div class="content-admin">

            <div class="title-toggle">
                <div class="item active">资质荣誉列表</div>
                <span class="btn-sty11 ml-20 btn-show-modal">新增</span>
            </div>
            <div class="inquire-input-c">
                <div class="item" style="margin-bottom: 0">
                    <div>
                        <div>
                            <table class="table-sty3">
                                <thead>
                                <tr>
                                    <th>编号</th>
                                    <th>标题</th>
                                    <th>图片</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="(item,index) in pagList">
                                    <td>{{index+1}}</td>
                                    <td>{{item.title}}</td>
                                    <td><img :src="imgBaseUrl + item.picUrl" alt="" class="img-sty3"></td>
                                    <td>{{item.crtTime}}</td>
                                    <td>
                                        <span class="marr-13 color-3" @click="editMe(item.id)">编辑</span>
                                        <span class="color-3" :id="item.id" @click="delMe(item.id)">删除</span>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>

                        <!--<div class="input-box1 bor-b-sty1" v-for="item in pagList" >-->
                            <!--<div class="li clearfix">-->
                                <!--<div class="left-k"><span class="col-ff4"></span><span class="text-sty1">动态标题</span></div>-->
                            <!--</div>-->
                            <!--<div class="li clearfix">-->
                                <!--<input type="text" v-model="item.title" disabled class="layui-input input-v mr-20" style="margin-left: 0;">-->
                            <!--</div>-->
                            <!--<div class="li clearfix">-->
                                <!--<div class="left-k"><span class="col-ff4"></span><span class="text-sty1">动态详情</span></div>-->
                                <!--<div class="right-v">-->

                                <!--</div>-->
                            <!--</div>-->
                            <!--<div class="li clearfix">-->
                                <!--<div v-html="item.content" class="right-v wid-820" style="border: 1px solid #eee;min-height: 200px">-->
                                <!--</div>-->


                            <!--</div>-->
                            <!--<div class="li clearfix">-->
                                <!--<div class="left-k"><span class="col-ff4"></span><span class="text-sty1">动态配图</span></div>-->
                            <!--</div>-->
                            <!--<div class="li clearfix">-->
                                <!--<div class="file-img">-->
                                    <!--<div class="box-file" v-for="listPng in item.picUrl" style="border: 1px solid #cecece;">-->
                                        <!--<img :src="imgBaseUrl + listPng" alt="">-->
                                        <!--&lt;!&ndash;<input type="file" class="file-btn">&ndash;&gt;-->
                                    <!--</div>-->
                                <!--</div>-->
                                <!--<div class="opation_box p-a" style="right: 0;">-->
                                    <!--<div class="mb10"><span class="btn-sty22 mr-8" @click="editMe(item.id)">编辑</span></div>-->
                                    <!--<div><span class="btn-sty22" @click="delMe(item.id)">删除</span></div>-->
                                <!--</div>-->

                            <!--</div>-->

                        <!--</div>-->
                        <div id="test1" class="text-r"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--<div>
    <iframe src="footer-record.html" style="width: 100%;border: none;height:60px;"></iframe>
</div>-->
<script src="../js/config.js"></script>
<script>
    var edit = '';
    var layedit = '';
    var postData = {
        limit:5,
        offset:1,
        type:1,
        storeId:localStorage.getItem('storeId')
    }

    var app = new Vue({
        el: '#vue-box',
        data: {
            pagList:'',
            imgBaseUrl: imgBaseUrl,
        },
        mounted:function(){
            this.getPage();
        },
        updated:function () {
        },
        methods:{
            getPage:function(){
                var that = this;
                get_ajaxPage("/cms/getAllNewPage", postData, function (data) {

                    console.log(data);
                    that.pagList = data.data;
                    that.pagList.forEach(function(item){
                        item.picUrl?item.picUrl = item.picUrl.split(",")[0]:item.picUrl =[]
                    })
                    console.log(that.pagList);
                    layui.use('laypage', function(){
                        var laypage = layui.laypage;
                        //执行一个laypage实例
                        laypage.render({
                            elem: 'test1'
                            ,count: data.count //数据总数，从服务端得到
                            ,limit:postData.limit
                            ,jump: function(obj, first){
                                //obj包含了当前分页的所有参数，比如：
                                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                                console.log(obj.limit); //得到每页显示的条数

                                //首次不执行
                                if(!first){
                                    //do something
                                    postData.offset = obj.curr;
                                    get_ajaxPage("/cms/getAllNewPage", postData, function (data) {
                                        that.pagList = data.data;
                                        that.pagList.forEach(function(item){
                                            item.picUrl?item.picUrl = item.picUrl.split(",")[0]:item.picUrl =[]
//                                            item.picUrl = item.picUrl.split(",");
                                        })
                                    })
                                }
                            }
                        });
                    });
                })
            },
            delMe:function(id){
                get_ajax("/cms/delNewById",{id:id},function (data) {
                    layer.msg('删除成功！')
                    app.getPage();
                })
            },
            editMe:function(id){
                $('.modal-banner-add').show();
                _id = id;
//                window.location.href='qualification_honor_add.html?id='+id;
                typeNew = 0;
                $('.js-showTitle').html('编辑');
                $('.file-img').find('.remove').remove();
                get_ajax("/cms/findInfoById", {id:_id}, function (data) {
                    $('.js-title').val(data.title)
                    $('#demo').val(data.content);
                    if(data.picUrl){
                        var picArr = data.picUrl.split(',');
                        picArr.forEach(function(item){
                            var el ='<div class="box-file remove" data-picUrl="'+item+'">'
                                +'<span class="del-png icon_close"></span>'
                                +'<img src="'+imgBaseUrl+item+'" alt="" class="upload_btn">'
                                +'</div>'
                            $('.file-img').append(el);
                        })
                    }
                    initEdit ();




                })
            }
        }
    });




    var typeNew = 1;
    var _id = '';
    $(document).on('click','.btn-hide-modal',function(){
        $('.modal-banner-add').hide();
    })
    $('.btn-show-modal').click(function(){
        $('.js-showTitle').html('新增');
        typeNew = 1;
        $('.modal-banner-add').show();
        $('.file-img').find('.remove').remove();$('.js-title').val('');
        $('#demo').val('');
        initEdit ()
    })
    $('.js-yesBtn').on('click',function(){
        var pngStr = '';
        $('.box-file').each(function(index){
            if(index>0){
                pngStr += $(this).attr('data-picurl')+','
            }
        })
        var picUrl = pngStr.slice(0,pngStr.length-1);
        var content = layedit.getContent(edit)
        if(typeNew != 1){
            get_ajax("/cms/editNewInfo", {id:_id,title:$('.js-title').val(),
                content:content,picUrl:picUrl,type:1
            }, function (data) {
                layer.msg('编辑成功！');
                $('.modal-banner-add').hide();
                app.getPage();
            })
        }else{
            get_ajax("/cms/saveNewInfo", {title:$('.js-title').val(),content:content,picUrl:picUrl,type:1}, function (data) {
                layer.msg('发布成功！');
                $('.modal-banner-add').hide();
                app.getPage();
            })
        }
    })
    //图片上传
    layui.use(['upload'], function () {
        var $ = layui.jquery, upload = layui.upload;
        //普通图片上传
        var uploadInst = upload.render({
            elem: '.upload_btn'
            ,multiple:true
            , url: baseUrl + '/file/upload?token=' + Token
            , before: function (obj) {
                loading = layer.load(1, {
                    shade: [0.1, '#fff'] //0.1透明度的白色背景
                });
            }
            , done: function (res, index) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg.msg('上传失败');
                } else {
                    var data = res.data;
//                    var str = '<div class="upload_img" picUrl="' + data.address + '" picId="' + data.id + '">' +
//                        '<i class="icon_delete"></i><img src="' + imgBaseUrl + data.address
//                        + '" alt=""></div>'
//                    this.item.parents(".file").after(str);
                    var el ='<div class="box-file remove" data-picUrl="'+data.address+'">'
                        +'<span class="del-png icon_close"></span>'
                        +'<img src="'+imgBaseUrl+data.address+'" alt="" class="upload_btn">'
                        +'</div>'
                    $('.file-img').append(el);
                    layer.close(loading);
                    console.log('上传成功！')
                }

            }
            , error: function () {

            }
        });
    })
    //    del-png
    $(document).on('click','.del-png',function(){
        $(this).parents('.box-file').remove();
    })
    initEdit ();
    function initEdit (){
        layui.use('layedit', function(){
            layedit = layui.layedit;
            layedit.build('demo'); //建立编辑器
            layedit.set({
                uploadImage: {
                    url: baseUrl + '/file/layeditUplode?token=' + Token,
                    type: "post"
                }
            });
            edit = layedit.build('demo');
        });
    }

</script>
</body>
</html>